<!--
 * @Description: 首页
 * @Author: wrysunny
 * @Date: 2024-11-18 18:25:22
 * @LastEditor: wrysunny
 * @LastEditTime: 2024-12-11 16:00:18
-->
<template>
	<view class="min-h-[100vh] bg-background pb-[calc(var(--window-bottom))]">
		<view class="w-full">
			<up-image :src="$setBaseUrl(homeInfo.upAd?.pic)" width="100%" height="720rpx" mode="scaleToFill"></up-image>
		</view>
		<view class="px-[30rpx] -translate-y-[100rpx]">
			<view>
				<view class="text-[24rpx] text-primary rounded-t-[16rpx] bg-white bg-opacity-60 px-[32rpx] py-[8rpx]" v-if="orderNotice">
					您的订单(排队号{{ orderNotice.takeCode }}){{ statusMap[orderNotice.status] }}
				</view>
				<view class="bg-white p-[40rpx] flex items-center shadowX rounded-b-[16rpx]">
					<up-avatar :src="store.userInfo.avatar" size="96rpx"></up-avatar>
					<view class="mx-[16rpx] flex-1">
						<view class="font-bold">{{ store.userInfo.nickName || '未登录' }}</view>
						<view class="mt-[16rpx] text-second text-[24rpx]">
							<text class="mr-[20rpx]">优惠券: {{ store.userInfo.couponCount }}张</text>
							<text>积分: {{ store.userInfo.point || 0 }}个</text>
						</view>
					</view>
					<view class="text-[20rpx] flex flex-col items-center" @click="ToTakeFood">
						<up-image :src="sacn" width="48rpx" height="48rpx"></up-image>
						<view class="mt-[6rpx]">取餐码</view>
					</view>
				</view>
			</view>
			<view class="mt-[20rpx] rounded-[8rpx] bg-white flex items-center justify-between py-[40rpx]">
				<view class="flex flex-col items-center flex-1" @click="sacnCode">
					<view class="">堂食</view>
					<view class="my-[40rpx]"><up-image :src="eatIn" height="80rpx" width="80rpx"></up-image></view>
					<view class="text-[22rpx] text-gray">门店用餐</view>
				</view>
				<view class="w-[2rpx] h-[228rpx] bg-[#eee] mx-[8rpx] flex-grow-0"></view>
				<view class="flex flex-col items-center flex-1" @click="deliveryFn">
					<view class="text-[32rpx]">外送</view>
					<view class="my-[40rpx]"><up-image :src="delivery" height="80rpx" width="80rpx"></up-image></view>
					<view class="text-[22rpx] text-gray">点单配送到手</view>
				</view>
			</view>
			<view class="w-full mt-[20rpx]">
				<up-image :src="$setBaseUrl(homeInfo.downAd?.pic)" width="100%" height="auto" mode="widthFix"></up-image>
			</view>
		</view>
	</view>
</template>

<script setup>
import sacn from '@/static/sacn.png';
import eatIn from '@/static/eatIn.png';
import delivery from '@/static/delivery.png';
import { onShow, onLoad } from '@dcloudio/uni-app';
import useUserInfo from '@/hooks/useUserInfo';
import { useLoginStore } from '@/store/login';
import utils from '@/utils/utils';
import { getBannerList, getNotice } from '@/config/api/banner';
import { readonly, ref } from 'vue';
onLoad((options) => {
	getBanner();
	if (options.userId) {
		uni.setStorageSync('pid', options.userId);
	}
});
onShow(() => {
	if (uni.getStorageSync('token')) {
		getUserInfoFn();
		getNoticeOrder();
	}
});
const { getUserInfoFn } = useUserInfo();
const store = useLoginStore();
const homeInfo = ref({});
const orderNotice = ref(null);
const statusMap = readonly({
	201: '已下单,马上为您制作',
	203: '制作中,请耐心等待',
	301: '已完成,请前往取餐'
});
const getBanner = async () => {
	try {
		const res = await getBannerList();
		if (res.code === 200) {
			homeInfo.value = res.data;
		}
	} catch (error) {
		//TODO handle the exception
	}
};
const getNoticeOrder = async () => {
	try {
		const res = await getNotice();
		if (res.code == 200) {
			orderNotice.value = res.data.order;
		}
	} catch (error) {
		//TODO handle the exception
	}
};
const sacnCode = () => {
	// #ifdef MP-WEIXIN
	uni.scanCode({
		success: (res) => {
			console.log(res);
		},
		fail: (err) => {
			console.log(err);
		}
	});
	// #endif
	// #ifndef MP-WEIXIN
	jWeixin.scanQRCode({
		needResult: 1,
		scanType: ['qrCode'],
		success: (res) => {
			if (isNaN(Number(res.resultStr))) {
				utils.showToast('请扫描正确的二维码');
				return;
			}
			uni.setStorageSync('shopId', res.resultStr);
			uni.switchTab({
				url: `/pages/menu/menu`
			});
		}
	});
	// #endif
};
const deliveryFn = () => {
	uni.switchTab({
		url: '/pages/menu/menu'
	});
};
const ToTakeFood = () => {
	const orderId = orderNotice.value?.id;
	if (!orderId) {
		utils.showToast('暂无订单');
		return;
	}
	uni.navigateTo({
		url: `/pages/takeFood/takeFood?orderId=${orderId}`
	});
};
</script>

<style lang="scss" scoped>
.shadowX {
	box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(40, 206, 253, 0.2);
}
</style>
